<template>
  <div class="demo">
    <p>组件功能描述</p>
    <div class="component-wrapper">
      <div class="component-wrapper-demo">
        <ClientOnly>
          <EchartMap :map-point="mapPoint" :map-line="mapLine" :map-block="mapBlock" :map-params="mapParams" />
        </ClientOnly>
      </div>
      <div class="code-content" style="height: 0">
        <div class="code-content-height">
          <pre><code class="vue">{{ codeStr }}</code></pre>
        </div>
      </div>
      <div class="lock-code" @click="showCode(0)" ref="xxx">
        <w-icon class="icon-down" :name="isShow[0] === false ? 'down' : 'up'"></w-icon>
        <span class="lock-code-word">{{
          isShow[0] === false ? "显示代码" : "隐藏代码"
        }}</span>
      </div>
    </div>
  </div>
</template>
  
<script>
import mixin from "../mixin";
export default {
  name: "demo",
  mixins: [mixin],
  data() {
    return {
      codeStr: `
      <EchartMap
          :map-point="mapPoint"
          :map-line="mapLine"
          :map-block="mapBlock"
          :map-params="mapParams"
        />
          `
        .replace(/^\s*/gm, "")
        .trim(),

      mapPoint: [
        {
          n: "西藏",
          value: [114.5332, 27.3779],
        },
      ],
      mapLine: [
        {
          fromName: "长沙",
          toName: "南宁",
          coords: [
            [114.5332, 27.3779],
            [114.2813, 23.6426],
          ],
        },
      ],
      mapBlock: [
        {
          name: "湖北",
          itemStyle: {
            areaColor: "#cc9e54",
          },
        },
        {
          name: "云南",
          itemStyle: {
            areaColor: "#cd4b6b",
          },
        },
        {
          name: "福建",
          itemStyle: {
            areaColor: "#d0d148",
          },
        },
        {
          name: "内蒙古",
          itemStyle: {
            areaColor: "blue",
          },
        },
      ],
      // 地图配置
      mapParams: {
        // 是否为3d效果地图   取值为 true / false
        is3d: true,
        // 地图背景色    取值为颜色值  默认 #397e82
        mapColor: "red",
        // 地图展示大小  取值为大小 默认 100%
        layoutSize: "120%",
      },
    };
  },
  methods: {},
};
</script>